<template>
  <div v-if="source.type === 'category'" class="label">
    <p>{{ source.category.toUpperCase() }}</p>
  </div>
  <div
    v-else
    class="contact-item friend-item"
    v-bind:class="{
      active:
        (sharedContactState.currentFriend &&
          source._category === sharedContactState.currentFriend._category &&
          source.uid === sharedContactState.currentFriend.uid) ||
        (sharedContactState.currentUser &&
          sharedContactState.currentUser.uid === source.uid),
      highlight:
        sharedContactState.contextMenuUserInfo &&
        sharedContactState.contextMenuUserInfo.uid === source.uid,
    }"
    @click="clickUserItem()"
    @contextmenu.prevent="showContactContextMenu"
  >
    <!-- 头像 -->
    <BaseImage
      class="kang-avatar mr-10"
      :src="source.portrait"
      alt=""
      @error="imgUrlAlt"
    ></BaseImage>
    <div>
      <div style="display: flex; align-items: center">
        <p class="single-line">{{ source._displayName }}</p>
        <p
          v-if="isExternalDomainUser"
          class="single-line"
          style="
            color: #f0a040;
            border-radius: 2px;
            padding: 1px 2px;
            font-size: 9px;
          "
        >
          {{ domainName }}
        </p>
      </div>
      <p
        v-if="source._userOnlineStatusDesc"
        class="single-line user-online-status"
      >
        {{ source._userOnlineStatusDesc }}
      </p>
    </div>
  </div>
</template>

<script>
import store from '../../../store'
import Config from '../../../config'
import ConversationType from '../../../wfc/model/conversationType'
import WfcUtil from '../../../wfc/util/wfcUtil'
import wfc from '../../../wfc/client/wfc'

export default {
  name: 'ContactItemView',
  props: {
    source: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      sharedContactState: store.state.contact,
    }
  },

  methods: {
    clickUserItem() {
      store.setCurrentFriend(this.source)
    },

    imgUrlAlt(e) {
      e.target.src = Config.DEFAULT_PORTRAIT_URL
    },
    showContactContextMenu(event) {
      this.$eventBus.$emit('showContactContextMenu', [event, this.source])
    },
  },
  computed: {
    isExternalDomainUser() {
      let user = this.source
      return WfcUtil.isExternal(user.uid)
    },
    domainName() {
      let user = this.source
      if (WfcUtil.isExternal(user.uid)) {
        let domainId = WfcUtil.getExternalDomainId(user.uid)
        let domainInfo = wfc.getDomainInfo(domainId)
        return '@' + domainInfo.name
      }
      return ''
    },
  },
}
</script>

<style lang="scss" scoped>
.label {
  width: 100%;
  padding: 4px 12px;
  background-color: var(--color-bg);
  font-size: 13px;
}

.contact-item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 68px;
  padding: 12px;
}

.user-online-status {
  color: var(--color-basic);
  font-size: 10px;
}
</style>
